<!-- 个人信息页面 -->
<template>
  <div>
    <div class="person-info">
      <div class="personForm">
        <div class="headSty">
          <div>头像</div>
          <div class="head-img">
            <img src="../../../static/me/avatar.png" alt="" />
            <img src="../../../static/me/arrow-right.png" alt="" />
          </div>
        </div>
        <div class="moreSty">
          <van-field v-model="userName" class="basicClass" label="姓名" placeholder-style="color:#999;" placeholder="请输入身高" type="input" @change="userName = $event.detail" />
        </div>
        <div>
          <select-down :columns="genderList" :value="gender" :label-name="'性别'" @changeValue="changeValue" />
        </div>
        <div>
          <select-down :columns="departmentList" :value="department" :label-name="'部门'" @changeValue="changeValue" />
        </div>
        <div>
          <select-down :columns="positionList" :value="position" :label-name="'职位'" @changeValue="changeValue" />
        </div>
        <div>
          <select-down :columns="educationList" :value="education" :label-name="'学历'" @changeValue="changeValue" />
        </div>
        <div>
          <van-field v-model="timeDate" label="入职日期" placeholder-style="color:#999;" readonly is-link input-align="right" placeholder="请选择" clickable @click-input="clickTime" />
          <van-popup :show="showTime" position="bottom">
            <van-datetime-picker type="date" :value="currentDate" :min-date="minDate" :basic-formatter="basicFormatter" @confirm="onTime" @cancel="onCancelTime" />
          </van-popup>
        </div>
        <div>
          <select-down :columns="salaryList" :value="salary" :label-name="'薪资'" @changeValue="changeValue" />
        </div>
        <div class="moreSty">
          <van-field v-model="email" class="basicClass" label="手机号码" placeholder-style="color:#999;" placeholder="请输入手机号码" type="input" @blur="onBlur" @change="email = $event.detail" />
        </div>
      </div>
      <!-- <div class="infoBtn">
          <van-button size="large" :class="showSubmit?'submit':'noSubmit'" round @click="submitPerson">
            提交并保存
          </van-button>
        </div> -->
    </div>
    <van-toast id="van-toast" />
  </div>
</template>
<script>
import { checkMobile } from '../../../utils/rule'
import selectDown from '../select-down.vue'
import Toast from '@/wxcomponents/vant/toast/toast'
export default {
  components: { selectDown },
  data() {
    return {
      showSubmit: false,
      gender: '',
      userName: '张三',
      department: '',
      position: '',
      education: '',
      salary: '',
      email: '',
      showTime: false,
      timeDate: '',
      // 性别list
      genderList: ['男', '女'],
      // 职位
      positionList: ['前端', 'java', 'UI'],
      // 部门list
      departmentList: ['商务部', '研发部', '人事部'],
      // 学历
      educationList: ['本科', '大专'],
      // 薪资
      salaryList: ['10000及以上', '8000-10000'],
      currentDate: new Date().getTime(),
      minDate: new Date(1970, 1, 1).getTime(),
    }
  },
  onLoad() {

  },
  methods: {
    // 电话号码失去焦点
    onBlur(val) {
      const number = checkMobile(val.detail.value)
      if (!number) {
        this.personForm.homeNumber = ''
      }
    },
    // 处理控件显示的时间格式
    basicFormatter(type, value) {
      if (type === 'year') {
        return `${value}年`
      } else if (type === 'month') {
        return `${value}月`
      } else if (type === 'day') {
        return `${value}日`
      }
      return value
    },
    // 选择值
    changeValue(val) {
      switch (val.name) {
        case '性别':
          this.gender = val.value
          break
        case '部门':
          this.department = val.value
          break
        case '职位':
          this.position = val.value
          break
        case '学历':
          this.education = val.value
          break
        case 'salary':
          this.education = val.value
          break
      }
    },
    // 返回上一页
    onClickLeft() {
      uni.navigateBack()
    },
    clickTime() {
      this.showTime = true
    },
    onTime(val) {
      const date = new Date(val.detail)
      const Year = date.getFullYear()
      const Moth = (date.getMonth() + 1 < 10 ? `0${date.getMonth() + 1}` : date.getMonth() + 1)
      const Day = (date.getDate() < 10 ? `0${date.getDate()}` : date.getDate())
      const GMT = `${Year}-${Moth}-${Day}`
      this.timeDate = GMT
      this.showTime = false
    },
    onCancelBrith() {
      this.showTime = false
    },
    submitPerson() {
      if (this.personForm.nation === undefined || this.personForm.nation.trim().length === 0) {
        Toast('请填写民族')
        return
      }
      if (this.personForm.nativePlace === undefined || this.personForm.nativePlace.trim().length === 0) {
        Toast('请填写籍贯')
        return
      }
      if (this.personForm.healthCondition === undefined || this.personForm.healthCondition.trim().length === 0) {
        Toast('请填写健康状况')
        return
      }
      this.personForm.isPersonOk = true
      uni.setStorageSync('person', this.personForm)
      // uni.navigateTo({
      //   url: '/package-guest/pages/info-regist/info-write/index',
      // })
    },
  },
}
</script>
  <style lang="scss" scoped>
  .person-info{
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    .personForm{
      width: 93%;
      margin: 0 auto;
      box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.06);
      border-radius: 2px;
    }
    .infoBtn{
      text-align: center;
      padding-top: 15%;
      padding-bottom: 10%;
      width: 80%;
    }
    .headSty{
        display: flex;
        justify-content: space-between;
        margin: 0 auto;
        padding: 0px 5px 0px 18px;
        .head-img{
            align-items: center;
            display: flex;
            img:nth-child(1){
                width:28px;
                height:28px;
            }
            img:nth-child(2){
                width:16px;
                height:16px;
            }
        }
    }
  }
  </style>
  <style lang="scss">
  .moreSty{
    view {
      label{
        width:100%;
        display: flex;
        white-space: nowrap;
      }
      input{
        padding-right: 8px;
        text-align: right;
      }
      textarea{
        padding-right: 8px;
        text-align: right;
      }
    }
    .van-field__body{
      padding-right: 16px;
    }
  }
  .personForm{
    .van-cell{
      padding: 10px 5px 10px 2px !important;
    }
    .van-cell__title{
      padding-left:16px;
    }
    .van-field__control{
      color:#999 !important;
      font-size: 12px;
    }
    .van-icon:before{
      color:#999;
    }
    .van-field__label{
      color:#333 !important;
      white-space: normal !important;
    }
  }
  .infoBtn{
    .noSubmit{
      .van-button--round {
        height: 36px;
        width: 75%;
        background: #ccc !important;
        color: #fff !important;
        font-size: 16px !important;
      }
    }
    .submit{
      .van-button--round {
        height: 36px;
        width: 75%;
        background: #029b00!important;
        color: #fff !important;
        font-size: 16px !important;
      }
    }
  }
  </style>
